<template>
	<div class="success">
		<!-- 预约成功 -->
		<div class="top">
			<img class="image" src="../../../static/img/smile.png" alt="">
			<p class="tip">预约成功，+3积分</p>
			<p class="successTip">恭喜您，您已成功预约活动门票</p>
			<div class="proceed" @click="$router.push('/active/index')">继续预约</div>
			<div class="myTicket" @click="godetail">预约详情</div>
		</div>
	</div>
</template>

<script>
	import {
		ActiveIndex
	} from '../../http/active'

	export default {
		name: '',
		data() {
			return {
				titem_id: 1
			}
		},
		mounted() {
			this.titem_id = this.$route.query.titem_id
		},
		methods: {
			godetail() {
				this.$router.push({
					path: '/active/orderdetail',
					query: {
						titem_id: this.titem_id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../style/mixin.scss";

	.success {
		width: 100vw;
		min-height: 100vh;
		background: #EEEEEE;
		display: flex;
		flex-direction: column;

		.top {
			width: 100%;
			height: 814px;
			background: #ffffff;
			padding: 72px;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 0 0 24px 24px;

			.image {
				width: 158px;
				height: 142px;
				margin-bottom: 35px;
			}

			.tip {
				font-size: 32px;
				font-weight: 500;
				color: rgba(241, 127, 42, 1);
				text-align: center;
			}

			.successTip {
				font-size: 32px;
				font-weight: 500;
				color: rgba(50, 50, 50, 1);
				line-height: 48px;
				margin-top: 81px;
			}

			.proceed {
				width: 520px;
				height: 84px;
				border: 2px solid rgba(241, 127, 42, 1);
				border-radius: 42px;
				font-size: 36px;
				font-weight: 400;
				color: rgba(241, 127, 42, 1);
				line-height: 84px;
				text-align: center;
				margin-top: 95px;
			}

			.myTicket {
				width: 520px;
				height: 84px;
				border-radius: 42px;
				background: rgba(241, 127, 42, 1);
				font-size: 36px;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 84px;
				text-align: center;
				margin-top: 61px;
			}
		}
	}
</style>
